<template>
  <div class="goods">
    <!-- 搜索框 -->
    <div class="demo-input-suffix">
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect"
        @blur="handleblur"
        prefix-icon="el-icon-search"
      ></el-autocomplete>
      <el-button type="primary" @click="toUserIndex">回到个人中心</el-button>
    </div>

    <!-- 商品列表 -->
    <div>
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column label="商品编号" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.gid }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="商家编号" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.mid }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="商品名称" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.gname }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="价格" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.price }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="详情" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.gdescribe }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" round @click="handleCollect(scope.row)"
            >收藏
            </el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" round @click="handleBuy(scope.row) "
            >购买
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "UserGoods",
    data() {
      return {
        search: "",

        restaurants: [],
        state: "",
        timeout: null,
        tableData: [],
      };
    },
    methods: {
      handleblur() {
        if (this.state == "") {
          this.selectAllGoods();
        } else {
          return;
        }
      },
      //搜索商品
      loadAll() {
        return [];
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString
          ? restaurants.filter(this.createStateFilter(queryString))
          : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (
            state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
          );
        };
      },

      handleSelect(item) {
        axios({
          url: "/selectLikeName",
          method: "post",
          params: {
            gName: item.value,
          },
        }).then((res) => {
          this.tableData = res.data.data;
        });
      },
      // 查看所有商品
      selectAllGoods() {
        axios.get("/selectTotalGoods").then((res) => {
          this.tableData = res.data.data;
          for (const item of this.tableData) {
            this.restaurants.push({value: item.gname});
          }
        });
      },
      // 商品收藏
      handleCollect(row) {
        this.$axios
          .post('/collectById', {
            uid: this.$route.query.uid,
            gid: row.gid
          })
          .then(res => {
            if (res.data.code === 200) {
              this.$message.success("收藏成功")
            } else if (res.data.code === 401) {
              this.$message.error("该商品已经收藏过了")
            } else {
              this.$message.error("收藏失败")
            }
          });

      },
      // 商品购买
      handleBuy(row) {
        this.$confirm('是否确认购买？')
          .then(_ => {
            axios({
              url: "/createNewOrders",
              method: "post",
              params: {
                uid: this.$route.query.uid,
                gid: row.id,
                mid: row.mid,
                gname: row.gname,
              },
            }).then(res => {
              if (res.data.code === 200) {
                this.$message.success("购买成功")
              } else {
                this.$message.error("购买失败")
              }
            });

            this.selectAllGoods();
          }).catch(_ => {
        });

      },
      //回到用户个人中心
      toUserIndex() {
        this.$router.replace({path: '/UserIndex', query: {uid: this.$route.query.uid}})
      },
    },
    created() {
      this.selectAllGoods();
    },
  };
</script>

<style scoped>
  .goods {
    margin-top: 10px;
  }

  .input1 {
    width: 300px;
  }

  .input2 {
    width: 200px;
    margin-left: -20px;
  }

  div {
    text-align: center;
    margin: 30px;
  }
</style>
